<template>
  <div class="app-container">
    <el-dialog
      fullscreen
      title="编辑"
      append-to-body="true"
      @opened="show"
      :visible.sync="dialogVisible">
      <el-form :inline="true" style="width: 100%">
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="from.proInfo.proName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目难度">
              <el-rate v-model="from.proInfo.proNandu"></el-rate>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="技术栈">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button class="button-new-tag" size="small" @click="showInput">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="团队人数">
              <el-input v-model="from.proInfo.proTuanduiNum" placeholder="团队人数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目分类">
              <el-cascader
                v-model="from.subjectTypeAndProType"
                :options="options"
                :props="props"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="外网链接">
              <el-input v-model="from.proInfo.proWebUrl" placeholder="请输入外网链接"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否置顶">
              <el-radio-group v-model="from.proInfo.isTop">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-radio-group v-model="from.proInfo.isEnabled">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-input
              resize="none"
              style="margin-bottom: 15px"
              type="textarea"
              :rows="2"
              placeholder="请输入该项目的摘要信息"
              v-model="from.proInfo.proZaiyao">
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-upload style="margin-bottom: 20px"
              class="upload-demo"
              ref="upload"
              action="http://localhost:9501/qiniu/uploadVideo"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="gotoUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传video文件，且不超过50M</div>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div id="websiteEditorElem" style="min-height: 350px;width: 100%">
            </div>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="归属学科">
        <el-select v-model="queryParams.subjectType" placeholder="请选择学科类别">
          <el-option label="java学科" value="1"></el-option>
          <el-option label="H5学科" value="2"></el-option>
          <el-option label="UI学科" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.enabled" placeholder="启用/禁用">
          <el-option label="启用" value="true"></el-option>
          <el-option label="禁用" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="pageList">查询</el-button>
        <el-button type="success" @click="openSaveWin">添加</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card" v-for="pro in tableData" style="margin-bottom: 15px">
      <div slot="header">
        <el-link style="padding: 3px 0;" type="warning" :href="pro.proWebUrl" :underline="false" target="_blank">
          {{pro.proName}}
        </el-link>
        <i class="el-icon-thumb" style="padding: 3px;margin-left: 50px">{{pro.zanNum}}</i>
        <i class="el-icon-view" style="padding: 3px;">{{pro.readNum}}</i>
        <i class="el-icon-document" style="padding: 3px;">{{pro.pingjiaNum}}</i>

        <el-button style="float: right; padding: 3px 0;font-size: small" type="text" @click="initModifyWin(pro.id)">
          编辑
        </el-button>
        <el-button style="float: right; padding: 3px 0;margin-right: 30px;color: red;font-size: small" type="text" @click="delProById(pro.id)">
          删除
        </el-button>
      </div>
      <div class="text item">
        <el-row :gutter="10">
          <el-col :span="7">
            <div>
              项目难度：
              <el-rate v-model="pro.proNandu" disabled></el-rate>
            </div>

          </el-col>
          <el-col :span="5">
            <p>适合团队人数：
              <el-tag type="warning">{{pro.proTuanduiNum}}</el-tag>
              人
            </p>
          </el-col>
          <el-col :span="4">
            所属项目分类：{{pro.subjectTypeStr}}
          </el-col>
          <el-col :span="8">
            技术栈：
            <el-tag style="margin: 5px"
                    v-for="tag in pro.proJishu.split(',')"
                    :key="tag"
                    :type="tag">
              {{tag}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            {{pro.proZaiyao}}
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-pagination
      style="margin-top: 20px"
      background
      :page-size="queryParams.rows"
      :current-page="queryParams.page"
      :pager-count="7"
      layout="prev, pager, next"
      :total="total"
      @current-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<script>
  import project from "@/api/basicdata/project";
  import $ from 'jquery'
  import E from 'wangeditor';

  export default {
    data() {
      return {
        fileList:[],

        editor: null,
        queryParams: {
          page: 1,
          rows: 5
        },
        from: {
          proInfo: {},
          proLongDetail: {}
        },
        queryDate: [],
        total: 0,
        tableData: [],
        dialogVisible: false,
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        value: [],
        props: {expandTrigger: 'hover', value: 'id'},
        options: []
      }
    },
    created() {
      this.pageList();
    },
    methods: {
      sizeChange(size) {
        this.queryParams.page = size;
        this.pageList();
      },
      pageList() {
        project.pageList(this.queryParams).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
      },
      show() {
        //防止富编辑器重复加载多次
        if (JSON.stringify(this.editor) == 'null') {
          let E = window.wangEditor
          this.editor = new E('websiteEditorElem');
          this.editor.create()
        }
        //数据初始化清空
        this.from = {
          proInfo: {},
          proLongDetail: {}
        }
        //查询课程分类数据
        project.getSubjectTypeOfProtype().then((res) => {
          this.options = res;
        })
        this.editor.$txt.html('')
      },
      initModifyWin(id) {
        project.get(id).then((res) => {
          this.from = res;
          this.editor.$txt.html(res.proLongDetail.proLongDetail)
          this.from.subjectTypeAndProType = [this.from.proInfo.subjectType, this.from.proInfo.proTypeId]
          if (this.from.proInfo.proJishu) {
            this.dynamicTags = this.from.proInfo.proJishu.split(",")
          }
        });
        this.dialogVisible = true;
      },
      openSaveWin() {
        this.dialogVisible = true;
        this.from = {
          proInfo: {},
          proLongDetail: {}
        };
        this.editor.$txt.html("");
        this.dynamicTags = [];
      },
      doSave() {
        if (this.dynamicTags) {
          this.from.proInfo.proJishu = this.dynamicTags.join(",");
        }
        //获取富文本中的内容
        let html = this.editor.$txt.html();
        if (html) {
          this.from.proLongDetail.proLongDetail = html;
        }
        project.modify(this.from).then((res) => {
          this.$notify({
            title: '操作提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
          if (res.success) {
            this.dialogVisible = false;
            this.pageList();
          }
        })
      },
      openModifyWin(data) {
        this.dialogVisible = true;
        project.get(data.id).then((res => {
          this.from = res;
        }))
      },
      updateUserEnabled(id) {
        project.updateEnabled(id).then((res) => {
          this.$notify({
            title: '操作提示',
            message: this.$createElement('i', {style: 'color: teal'}, res.message)
          });
        })
      },
      delProById(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          project.delProById(id).then((res) => {
            this.$notify({
              title: '操作提示',
              message: this.$createElement('i', {style: 'color: teal'}, res.message)
            });
            if (res.success) {
              this.pageList();
            }
          })
        })
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      /* ========begin================关于视频上传相关方法 ======================*/
      gotoUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleSuccess(res, file, fileList){
        if (res && res.success){
          this.from.proLongDetail.videoUrl = res.data.rootUrl;
        }else {
          alert(res.message);
        }
      }
      /* ========end================关于视频上传相关方法 ======================*/

    }

  }
</script>
